<div id="city_tabs">
  <ul>
    <li><a href="#city_tabs-1" onclick="javascript:city_tab_index=0;">Overview</a></li>
    <li><a href="#city_tabs-2" onclick="javascript:city_tab_index=1;">Production</a></li>
    <li><a href="#city_tabs-3" onclick="javascript:city_tab_index=2;">Traderoutes</a></li>
    <li class="extra_tabs_big" onclick="javascript:city_tab_index=3;"><a href="#city_tabs-5">Settings</a></li>
    <li><a href="#city_tabs-4" onclick="javascript:city_tab_index=4;">Governor</a></li>
    <li class="extra_tabs_small" onclick="javascript:city_tab_index=5;"><a href="#city_tabs-6">Units/buildings</a></li>
  </ul>

  <div id="city_tabs-1">
    <div id="city_overview_tab" class="citydlg_tabs">
    <div id="city_viewport">
    <div id="specialist_panel">
    </div>
    
    <div class="city_panel">
      <div id="city_canvas_div">
        <canvas id="city_canvas" class="city_canvas" width="384" height="192" moz-opaque="true"></canvas>
      </div>
    </div>

    <div class="city_panel">
      <div id="city_dialog_info">
	  <div><b>City information:</b></div>
	  <div style="float:left;">
	  <span id="city_size"></span>
	  <div id='city_production_overview'></div>
	  <div id='city_production_turns_overview'></div>
	</div>
	<div style="float: left; margin-top: -20px; padding-left: 20px;"> 
	  <table id="city_stats">
	  <tr><td>Food: </td><td id="city_food"></td></tr>
	  <tr><td>Prod: </td><td id="city_prod"></td></tr>
	  <tr><td>Trade: </td><td id="city_trade"></td></tr>
	  <tr><td>Gold:: </td><td id="city_gold"></td></tr>
	  <tr><td>Luxury: </td><td id="city_luxury"></td></tr>
	  <tr><td>Science: </td><td id="city_science"></td></tr>
	  <tr><td>Corruption: </td><td id="city_corruption"></td></tr>
	  <tr><td>Waste: </td><td id="city_waste"></td></tr>
	  <tr><td>Pollution: </td><td id="city_pollution"></td></tr>
          <tr><td>Tech stolen: </td><td id="city_steal"></td></tr>
          <tr><td>Culture: </td><td id="city_culture"></td></tr>
  	  </table>
        </div>
      </div>

    </div>
    <div id="city_improvements_panel" class="city_panel">
      <div style="clear: left;"></div>
      <div id="city_improvements">
        <div id="city_improvements_title">City Improvements:</div>
        <div id="city_improvements_list"></div>
      </div>
      
      <div id="city_present_units" >
        <div id="city_present_units_title">Present Units:</div>
        <div id="city_present_units_list"></div>
      </div>

      <div id="city_supported_units" >
        <div id="city_supported_units_title">Supported Units:</div>
        <div id="city_supported_units_list"></div>
      </div>

    </div>


  </div>
  </div>
  </div> 
  <div id="city_tabs-2">
    <div id="city_production_tab" class="citydlg_tabs">
      <div id='worklist_left'>
        <div id='worklist_dialog_headline'></div>
        <div id='worklist_heading'>Target Worklist:</div><div id='city_current_worklist'></div>
      </div>
      <div id='worklist_right'>
        <div id='tasks_heading'>
          <input id='show_unreachable_items' type='checkbox'/>Show unreachable items<br/>
          Source tasks:
        </div>
        <div id='worklist_production_choices'></div>
      </div>
      <div id='prod_buttons'>
        <button type="button" class="button" onClick="city_change_production();" id="city_change_production_btn">Change Production</button>
        <button type="button" class="button" onClick="city_add_to_worklist();" id="city_add_to_worklist_btn">Add to worklist</button>
      </div>
      <div id="worklist_control">
        <button type="button" class="button" onClick="city_insert_in_worklist();" id="city_worklist_insert_btn" title="Insert before first selected task, or first in the list"><i class="fa fa-chevron-left fa-fw"></i></button>
        <div class="wc_spacer"></div>
        <button type="button" class="button" onClick="city_worklist_task_up();" id="city_worklist_up_btn" style="height: 20%;" title="Move selected tasks up"><i class="fa fa-chevron-up fa-fw"></i></button>
        <button type="button" class="button" onClick="city_worklist_task_down();" id="city_worklist_down_btn" style="height: 20%;" title="Move selected tasks down"><i class="fa fa-chevron-down fa-fw"></i></button>
        <div class="wc_spacer"></div>
        <button type="button" class="button" onClick="city_exchange_worklist_task();" id="city_worklist_exchange_btn" title="Change selected tasks"><i class="fa fa-exchange fa-fw"></i></button>
        <div class="wc_spacer"></div>
        <button type="button" class="button" onClick="city_worklist_task_remove();" id="city_worklist_remove_btn" title="Remove selected tasks"><i class="fa fa-trash fa-fw"></i></button>
      </div>
    </div>
  </div> 
  <div id="city_tabs-3">
    <div id="city_traderoutes_tab" class="citydlg_tabs"></div>
  </div> 
  <div id="city_tabs-5">
    <div id="city_settings_tab" class="citydlg_tabs">
      <div id="city_disband_options" >
        <input id="disbandable_city" type="checkbox" name="disband_city0" value="disband_city0"/>Disband city if built settler at size 1.
      </div>

    </div>
  </div> 
  <div id="city_tabs-6" class="citydlg_tabs">
    <div id="city_units_tab"></div>
  </div>


    <div id="city_tabs-4">
        <div id="city_governor_tab" class="citydlg_tabs">
            <form name="cma_vals" id="cma_form" >
                <table border="0">
                    <tbody>
                    <tr>

                        <td>
                            <span style="">
                              <input id="cma_food" type="checkbox" name="cma_food" value="" onclick="button_pushed_toggle_cma();" />
                              <img style="" class="lowered_gov" src="/images/wheat.png">
                              <b>Food </b>
                            </span>
                        </td>
                        <td>
                            <span style="">
                              <input id="cma_shield" type="checkbox" name="cma_shield" value="" onclick="button_pushed_toggle_cma();" />
                              <img style="" class="lowered_gov" src="/images/shield14x18.png">
                              <b>Shield </b>
                            </span>
                        </td>
                        <td>
                            <span style="">
                              <input id="cma_trade" type="checkbox" name="cma_trade" value="" onclick="button_pushed_toggle_cma();" />
                              <img style="" class="lowered_gov" src="/images/trade.png">
                              <b>Trade </b>
                            </span>
                        </td>
                        <td>
                            <span style="">
                              <input id="cma_gold" type="checkbox" name="cma_gold" value="" onclick="button_pushed_toggle_cma();" />
                              <img style="" class="lowered_gov" src="/images/gold.png">
                              <b>Gold </b>
                           </span>
                        </td>
                        <td>
                            <span style="">
                              <input id="cma_luxury" type="checkbox" name="cma_luxury" value="" onclick="button_pushed_toggle_cma();" />
                              <img style="" class="lowered_gov" src="/images/lux.png">
                              <b>Luxury </b>
                            </span>
                        </td>
                        <td>
                           <span style="">
                              <input id="cma_science" type="checkbox" name="cma_science" value="" onclick="button_pushed_toggle_cma();" />
                              <img style="" class="lowered_gov" src="/images/sci.png">
                              <b>Science </b>
                           </span>
                        </td>

                    </tr>
                    </tbody>
                </table>
            </form>


        </div>
    </div>
 
</div>
